<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>TweenMax</title>
    <style type="text/css">
    .grey{ width: 200px; height: 100px; border: 1px solid #DDD; text-align: center; transition: all 0.5s;}
    .grey.active{ width: 500px; }
    .full-box{ width: 100%; height: 100vh; }
    body{
        margin: 0;
    }
    </style>
</head>
<body>
    <div id='trigger-1'></div>
    <div class="full-box">
        <h2>第1组</h2>
        <div class="grey greyA1">Bounce.easeIn</div>
        <div class="grey greyA2">Bounce.easeOut</div>
        <div class="grey greyA3">Bounce.easeInOut</div>
    </div>
    <div id='trigger-2'></div>
    <div class="full-box">
        <h2>第2组</h2>
        <div class="grey greyB1">Elastic.easeIn</div>
        <div class="grey greyB2">Elastic.easeOut</div>
        <div class="grey greyB3">Elastic.easeInOut</div>
    </div>
    <div id='trigger-3'></div>
    <div class="full-box">
        <h2>第3组</h2>
        <div class="grey greyC1">Power0.easeIn</div>
        <div class="grey greyC2">Power0.easeOut</div>
        <div class="grey greyC3">Power0.easeInOut</div>
        <div class="grey greyC4">Power0.easeNone(对于线性动画，请使用Power0.easeNone)</div>
    </div>
    <div id='trigger-4'></div>
    <div class="full-box">
        <h2>第3组</h2>
        <div class="grey greyC1">Power0.easeIn</div>
        <div class="grey greyC2">Power0.easeOut</div>
        <div class="grey greyC3">Power0.easeInOut</div>
        <div class="grey greyC4">Power0.easeNone(对于线性动画，请使用Power0.easeNone)</div>
    </div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.0/ScrollTrigger.min.js"></script>
<script>
const layoutH = window.innerHeight;
gsap.registerPlugin(ScrollTrigger);
</script>

<script>
// 如何才能从下往上滚动的时候也触发呢
const gsapAnilineB1 = gsap.timeline({
    scrollTrigger: {
        trigger: '#trigger-2',
        start: `${100} bottom`,
        end: `+=${layoutH}`,
        onEnter: function() {
            console.log('gsapAnilineB1', 'onEnter');
            document.querySelector('.greyB1').classList.add('active')
        },
        onLeave: function() {
            console.log('gsapAnilineB1', 'onLeave');
            document.querySelector('.greyB1').classList.remove('active')
        },
        onStart: function() {
            console.log('gsapAnilineB1', 'onStart');
        },
        onUpdate: function(n1) {
            console.log('gsapAnilineB1', 'onUpdate', n1);
        },
        
    }
});
</script>
<script type="text/javascript">
console.log('333');
ScrollTrigger.create({
  trigger: '#trigger-3',
  start: "top center",
  end: "+=500",
  onUpdate: self => console.log("progress:", self.progress)
});
</script>
</html>
